<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工仪表板 - 养老院管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/main.css}">
</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
    <div class="sidebar-brand">
        <h4 class="text-white">养老院管理系统</h4>
    </div>
    <hr class="sidebar-divider">
    <div class="sidebar-heading">员工菜单</div>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link active" th:href="@{/staff/dashboard}">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>仪表板</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/staff/elderly}">
                <i class="fas fa-fw fa-user-friends"></i>
                <span>老人管理</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/staff/add-health-record}">
                <i class="fas fa-fw fa-heartbeat"></i>
                <span>添加健康记录</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/staff/add-medication}">
                <i class="fas fa-fw fa-pills"></i>
                <span>添加药物</span>
            </a>
        </li>
    </ul>
    <hr class="sidebar-divider">
    <div class="sidebar-heading">账户</div>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" th:href="@{/staff/profile}">
                <i class="fas fa-fw fa-user-circle"></i>
                <span>个人资料</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/logout}">
                <i class="fas fa-fw fa-sign-out-alt"></i>
                <span>退出登录</span>
            </a>
        </li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="content">
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand navbar-light bg-white mb-4 shadow">
        <button id="sidebarToggle" class="btn btn-link d-md-none rounded-circle mr-3">
            <i class="fas fa-bars"></i>
        </button>
        <h5 class="mb-0">员工仪表板</h5>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="mr-2 d-none d-lg-inline text-gray-600 small" th:text="${#authentication.name}">员工</span>
                    <i class="fas fa-user-circle fa-fw"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="userDropdown">
                    <a class="dropdown-item" th:href="@{/staff/profile}">
                        <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                        个人资料
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" th:href="@{/logout}">
                        <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                        退出登录
                    </a>
                </div>
            </li>
        </ul>
    </nav>

    <!-- 页面内容 -->
    <div class="container-fluid">
        <!-- 统计卡片 -->
        <div class="row">
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">负责老人数</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${elderlyCount}">12</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-user-friends fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">今日健康记录</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${todayHealthRecords}">5</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-heartbeat fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">待处理药物</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${pendingMedications}">8</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-pills fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card danger shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">需要关注老人</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${attentionNeededElderly}">3</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-exclamation-circle fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 今日任务 -->
        <div class="row">
            <div class="col-lg-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">今日任务</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="tasksTable" width="100%" cellspacing="0">
                                <thead>
                                <tr>
                                    <th>任务</th>
                                    <th>老人</th>
                                    <th>时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="task : ${todayTasks}">
                                    <td th:text="${task.description}">测量血压</td>
                                    <td th:text="${task.elderly.name}">王老先生</td>
                                    <td th:text="${#dates.format(task.scheduledTime, 'HH:mm')}">09:00</td>
                                    <td>
                                                <span th:class="${task.completed ? 'badge badge-success' : 'badge badge-warning'}"
                                                      th:text="${task.completed ? '已完成' : '待处理'}">待处理</span>
                                    </td>
                                    <td>
                                        <a th:if="${!task.completed}" th:href="@{/staff/task/{id}/complete(id=${task.id})}" class="btn btn-sm btn-success">
                                            <i class="fas fa-check"></i> 完成
                                        </a>
                                        <a th:href="@{/staff/elderly/{id}(id=${task.elderly.id})}" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看老人
                                        </a>
                                    </td>
                                </tr>
                                <!-- 示例数据 -->
                                <tr>
                                    <td>测量血压</td>
                                    <td>王老先生</td>
                                    <td>09:00</td>
                                    <td><span class="badge badge-warning">待处理</span></td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-success">
                                            <i class="fas fa-check"></i> 完成
                                        </a>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看老人
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>服药提醒</td>
                                    <td>刘老太太</td>
                                    <td>10:30</td>
                                    <td><span class="badge badge-success">已完成</span></td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看老人
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>康复训练</td>
                                    <td>张先生</td>
                                    <td>14:00</td>
                                    <td><span class="badge badge-warning">待处理</span></td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-success">
                                            <i class="fas fa-check"></i> 完成
                                        </a>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看老人
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 即将到期的药物 -->
            <div class="col-lg-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">即将到期的药物</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="medicationsTable" width="100%" cellspacing="0">
                                <thead>
                                <tr>
                                    <th>药物名称</th>
                                    <th>老人</th>
                                    <th>服用时间</th>
                                    <th>倒计时</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="medication : ${upcomingMedications}">
                                    <td th:text="${medication.name}">降压药</td>
                                    <td th:text="${medication.elderly.name}">王老先生</td>
                                    <td th:text="${#dates.format(medication.scheduledTime, 'HH:mm')}">10:00</td>
                                    <td>
                                        <span class="medication-timer" th:data-time="${medication.scheduledTime}">2小时 30分钟</span>
                                    </td>
                                    <td>
                                        <a th:href="@{/staff/medication/{id}/administer(id=${medication.id})}" class="btn btn-sm btn-success">
                                            <i class="fas fa-check"></i> 已服用
                                        </a>
                                        <a th:href="@{/staff/elderly/{id}(id=${medication.elderly.id})}" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看老人
                                        </a>
                                    </td>
                                </tr>
                                <!-- 示例数据 -->
                                <tr>
                                    <td>降压药</td>
                                    <td>王老先生</td>
                                    <td>10:00</td>
                                    <td><span class="medication-timer" data-time="2023-06-15T10:00:00">2小时 30分钟</span></td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-success">
                                            <i class="fas fa-check"></i> 已服用
                                        </a>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看老人
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>心脏药</td>
                                    <td>刘老太太</td>
                                    <td>12:00</td>
                                    <td><span class="medication-timer" data-time="2023-06-15T12:00:00">4小时 30分钟</span></td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-success">
                                            <i class="fas fa-check"></i> 已服用
                                        </a>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看老人
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>安眠药</td>
                                    <td>张先生</td>
                                    <td>21:00</td>
                                    <td><span class="medication-timer" data-time="2023-06-15T21:00:00">13小时 30分钟</span></td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-success">
                                            <i class="fas fa-check"></i> 已服用
                                        </a>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看老人
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 需要关注的老人 -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">需要关注的老人</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="attentionTable" width="100%" cellspacing="0">
                                <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                    <th>性别</th>
                                    <th>健康状况</th>
                                    <th>最近健康记录</th>
                                    <th>备注</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="elderly : ${attentionElderly}">
                                    <td th:text="${elderly.name}">张先生</td>
                                    <td th:text="${elderly.age}">75</td>
                                    <td th:text="${elderly.gender}">男</td>
                                    <td>
                                        <span class="badge badge-warning" th:text="${elderly.healthStatus}">需要关注</span>
                                    </td>
                                    <td th:text="${elderly.lastHealthRecord}">血压偏高，需要定期监测</td>
                                    <td th:text="${elderly.notes}">有心脏病史，需要特别关注</td>
                                    <td>
                                        <a th:href="@{/staff/elderly/{id}(id=${elderly.id})}" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                        <a th:href="@{/staff/add-health-record?elderlyId={id}(id=${elderly.id})}" class="btn btn-sm btn-primary">
                                            <i class="fas fa-plus"></i> 添加记录
                                        </a>
                                    </td>
                                </tr>
                                <!-- 示例数据 -->
                                <tr>
                                    <td>张先生</td>
                                    <td>75</td>
                                    <td>男</td>
                                    <td><span class="badge badge-warning">需要关注</span></td>
                                    <td>血压偏高，需要定期监测</td>
                                    <td>有心脏病史，需要特别关注</td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                        <a href="#" class="btn btn-sm btn-primary">
                                            <i class="fas fa-plus"></i> 添加记录
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>李老先生</td>
                                    <td>80</td>
                                    <td>男</td>
                                    <td><span class="badge badge-danger">危急</span></td>
                                    <td>昨晚发烧，体温38.5度</td>
                                    <td>需要密切监测体温变化</td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                        <a href="#" class="btn btn-sm btn-primary">
                                            <i class="fas fa-plus"></i> 添加记录
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>赵老太太</td>
                                    <td>85</td>
                                    <td>女</td>
                                    <td><span class="badge badge-warning">需要关注</span></td>
                                    <td>食欲不振，需要营养补充</td>
                                    <td>有轻度认知障碍</td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                        <a href="#" class="btn btn-sm btn-primary">
                                            <i class="fas fa-plus"></i> 添加记录
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script th:src="@{/js/main.js}"></script>
</body>
</html>